<template>
  <div class="app-container calendar-list-container" v-loading="loading" >
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container">
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始日期" prop="startDate">
            <el-date-picker v-model="q.startDate" type="date" placeholder="起始日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="q.endDate" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="cx-btnbox">
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" class="body-w">
      <el-table-column label="用户" prop="userName" width="150" >
        <template slot-scope="scope" >
          {{ `${scope.row.userName}【${scope.row.name}】` }}
        </template>
      </el-table-column>
      <el-table-column label="订单时间" prop="creationTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" prop="consignee"></el-table-column>
      <el-table-column label="收货人电话" prop="consigneeTel"></el-table-column>
      <el-table-column label="收货地址" prop="consigneeAddress" ></el-table-column>
      <el-table-column label="状态" prop="orderState" align="center">
        <template slot-scope="scope" >
          <el-tag :type="['info','','success'][scope.row.orderState]" >{{ ['未发货','已发货','已收货'][scope.row.orderState] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="快递名称" prop="expressCompanyName"></el-table-column>
      <el-table-column label="快递单号" prop="expressNumber" ></el-table-column>
      <el-table-column label="发货时间" prop="expressDeliveryTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.expressDeliveryTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" prop="completedTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.completedTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.orderState === 0 && isAdmin" round type="danger" @click="handleOpenExpress(scope.row)" size="small">填写发货信息</el-button>
          <el-button v-if="scope.row.orderState === 1 && !isAdmin" round type="success" @click="handleComplete(scope.row)" size="small">确认收货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-right:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="q.startPage" :page-sizes="[10,20,30, 50]" :page-size="q.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="送货快递信息" :visible.sync="dialogVisible">
      <el-form :model="postForm" :rules="rules" ref="postForm" label-width="100px" >
        <el-form-item label="快递名称" prop="expressCompanyName">
          <el-input v-model="postForm.expressCompanyName"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNumber">
          <el-input v-model="postForm.expressNumber"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" @click="handleSubmit">确认发货</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { GetOrderPageList, Delivery, Complete } from '@/api/order'

export default {
  name: 'order',
  data() {
    return {
      list: [],
      total: 0,
      dialogVisible: false,
      loading: false,
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 30,
        startDate: '',
        endDate: ''
      },
      postForm: {
        expressCompanyName: '',
        expressNumber: ''
      },
      rules: {
        expressCompanyName: [
          { required: true, message: '请输入快递名称', trigger: 'blur' }
        ],
        expressNumber: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    isAdmin() {
      return this.roles.includes('ADMIN')
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    getList() {
      var _this = this
      _this.loading = true
      GetOrderPageList(_this.q).then(result => {
        _this.list = result.data.items
        _this.total = result.data.totalCount
        _this.loading = false
      })
    },
    handleSizeChange(val) {
      this.q.pageCount = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.q.startPage = val
      this.getList()
    },
    handleSubmit() {
      var _this = this
      _this.loading = true
      Delivery(_this.postForm).then(result => {
        _this.dialogVisible = false
        _this.$message.success('提交成功')
        _this.getList()
      })
    },
    handleOpenExpress(row) {
      this.postForm.expressCompanyName = ''
      this.postForm.expressNumber = ''
      this.postForm.id = row.id
      this.dialogVisible = true
    },
    handleComplete(row) {
      var _this = this
      _this.$confirm('确认已收货并完成订单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        _this.loading = true
        Complete({ id: row.id }).then(result => {
          _this.loading = false
          _this.$message.success('操作完成')
          _this.getList()
        })
      })
    }
  }
}
</script>

